<template>
  <div class="report-card">
    <div class="user-info">
      <div class="avatar">+</div>
      <div class="user-name">王晓蕾</div>
      <div class="user-title">勘探开发研究院</div>
      <div class="user-email">wangxiaolei@cnpc.com.cn</div>
    </div>
    <!-- <div class="menus">
      <div class="menus-item" v-for="item in menus" v-bind:key="item.id">
        <div class="icon"><img :src="item.icon" alt=""></div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
    </div> -->
    <ReportMenus :menus="menus" />
    <div class="number-card">
      <div
        class="number-item"
        v-for="item in numberCounts"
        v-bind:key="item.id"
      >
        <div class="count">
          {{ item.count }}
          <span v-if="item.unit" class="unit">{{ item.unit }}</span>
        </div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ReportMenus from './ReportMenus.vue'

const menus = ref([
  {
    id: 1,
    title: '我的送检',
    active: true,
    icon: 'assignment',
    path: '/mobile/my-submission',
  },
  {
    id: 2,
    title: '我的预约',
    icon: 'event_available',
    path: '/mobile/my-order',
  },
  {
    id: 3,
    title: '报告验伪',
    icon: 'barcode_scanner',
    path: '/mobile/my-report-result',
  },
  {
    id: 4,
    title: '送样单位',
    icon: 'home_work',
    path: '/mobile/my-report-list',
  },
  {
    id: 5,
    title: '地址信息',
    icon: 'pin_drop',
    path: '/mobile/my-report-company',
  },
  { id: 6, title: '个人信息', icon: 'badge', path: '/mobile/my-report' },
])

const numberCounts = ref([
  { id: 1, title: '送检总数', count: 2 },
  { id: 2, title: '待送检数', count: 1 },
  { id: 3, title: '预约总数', count: 18 },
  { id: 4, title: '检测报告', count: 22 },
  { id: 5, title: '付款总金额', count: 3.92, unit: '万元' },
  { id: 6, title: '待付款金额', count: 0.32, unit: '万元' },
])

// const reportList = ref([
//   {
//     id: 1,
//     title: '热解有机碳；总有机碳；',
//     count: 2,
//     status: '检查中',
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 1,
//     title: '双探头低真空场发射扫描电镜矿物扫描系统',
//     count: 2,
//     status: '已预约',
//     desc: 'Apreo,LoVac 30kv',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 1,
//     title: '热解有机碳；总有机碳；',
//     count: 2,
//     status: '院内',
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 1,
//     title: '热解有机碳；总有机碳；',
//     count: 2,
//     status: '默认',
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   }
// ])
</script>

<style scoped lang="scss">
.report-card {
  width: dpi(70rem);
  min-height: dpi(97rem);
  margin: 0 auto;
  margin-top: dpi(13rem);
  background-color: #ffffff;
  box-shadow: 0rem dpi(1rem) dpi(3rem) 0rem rgba(5, 32, 77, 0.1);
  border-radius: dpi(1rem);
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: dpi(13rem);
    height: dpi(13rem);
    margin-top: dpi(-7rem);
    border-radius: 50%;
    font-size: dpi(5rem);
    color: #fff;
    background-color: #0571b0;
    border: solid dpi(1rem) #05204d;
  }
  .user-name {
    font-family: PingFangSC-Semibold;
    font-size: dpi(3rem);
    line-height: dpi(5rem);
    color: #05204d;
  }
  .user-title,
  .user-email {
    margin-top: dpi(2rem);
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    line-height: dpi(3rem);
    color: #0571b0;
  }
}

// .menus{
//   display: grid;
//   grid-template-columns: repeat(3, 1fr);
//   padding: dpi(4rem);
//   .menus-item{
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     flex-direction: column;
//     height: dpi(19rem);
//     .icon{
//       width: dpi(8rem);
//       height: dpi(8rem);
//       background-color: #e6f1f7;
//       border-radius: dpi(2rem);
//       > img{
//         height: 100%;
//       }
//     }
//     .title{
//       margin-top: dpi(3rem);
//       font-family: PingFangSC-Medium;
//       font-size: dpi(2rem);
//       line-height: dpi(3rem);
//       color: #05204d;
//     }
//   }
// }

.number-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: dpi(36rem);
  background-color: #05204d;
  border-radius: 0rem 0rem dpi(1rem) dpi(1rem);
  &::after {
    display: block;
    position: absolute;
    top: 50%;
    left: dpi(4rem);
    right: dpi(4rem);
    height: 1px;
    background-color: #dddddd;
    opacity: 0.2;
    content: '';
  }
  .number-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    .count {
      font-family: HelveticaNeue-Bold;
      font-size: dpi(5rem);
      line-height: dpi(3rem);
      color: #ffffff;
      .unit {
        font-size: dpi(2rem);
      }
    }
    .title {
      margin-top: dpi(2rem);
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      line-height: dpi(3rem);
      color: #ffffff;
      opacity: 0.5;
    }
  }
}

// .report-card{
//   margin: 0 dpi(4rem);
//   .report-default {
//     width: dpi(70rem);
//     min-height: dpi(30rem);
//     background-color: #ffffff;
//     box-shadow: 0rem dpi(1rem) dpi(2rem) 0rem rgba(0, 0, 0, 0.05);
//     .info{
//       display: flex;
//       flex-direction: column;
//       min-height: dpi(16rem);
//       padding-left: dpi(3rem);
//       padding-bottom: dpi(4rem);
//       background-color: #f2f8fb;
//       .status{
//         display: inline-block;
//         color: #fff;
//         font-size: dpi(2rem);
//         padding: dpi(1rem) dpi(2rem);
//         background-color: #0571b0;
//       }
//       .title{
//         margin-top: dpi(2rem);
//         margin-bottom: dpi(4rem);
//         font-family: PingFangSC-Semibold;
//         font-size: dpi(3rem);
//         color: #05204d;
//       }
//       .desc{
//         font-family: PingFangSC-Regular;
//         font-size: dpi(2rem);
//         color: #05204d;
//         opacity: 0.8;
//       }
//     }
//   }
// }
</style>
